<template>
  <div class="bd-open" v-html="lyric?.lyric1"></div>
  <div class="bd-open" v-html="lyric?.lyric2" v-if="flag"></div>
  <div class="crl" v-show="lyric">
    <a href="javascirpt:;" class="s-fc7" @click="unfold"
      >{{ text }}
      <i class="u-icn u-icn1" :class="uf"></i>
    </a>
  </div>
  <el-skeleton :rows="8" class="skeleton-mask" v-if="!lyric" />
</template>

<script>
import { computed, inject } from "@vue/runtime-core";
import { onBeforeUnmount } from "@vue/runtime-core";
import { useStore } from "vuex";
import { ref } from "vue";
export default {
  name: "lyric",
  setup() {
    const store = useStore();
    const lyric = computed(() => store.state.SongLyric.pageLyric);
    let hg = ref("bd-en");
    let text = ref("展开");
    let uf = ref("u-icn-bgps1");
    store.commit("SongLyric/changePageFlag", false);
    const { info } = inject("comment");
    store.dispatch("SongLyric/Lyric", info.id);
    let flag = ref(false);
    function unfold() {
      if (text.value === "展开") {
        text.value = "收起";
        flag.value = true;
      } else {
        flag.value = false;
        text.value = "展开";
        uf.value = "u-icn-bgps1";
      }
    }
    onBeforeUnmount(() => {
      store.commit("SongLyric/changePageLyric", null);
    });
    return {
      lyric,
      hg,
      unfold,
      text,
      uf,
      flag,
    };
  },
};
// 1919430638
</script>

<style scoped lang="less">
.bd-open {
  margin-top: 13px;
  line-height: 23px;
  height: auto;
  overflow: hidden;
}
.crl {
  margin-top: 5px;
  line-height: 23px;
}
.u-icn1 {
  width: 11px;
  height: 8px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-icn-bgps {
  background-position: -45px -520px;
}
.u-icn-bgps1 {
  background-position: -65px -520px;
}
.skeleton-mask {
  height: 299px;
}
</style>
